<template>
	<view class="page">
		<topVue></topVue>
		<view class="logoVue flex-column align-center">
			<image src="../../static/app.png" style="width: 200rpx; height: 200rpx;"></image>
			<view style="font-weight: 600; font-size: 40rpx; padding-top: 30rpx; line-height: 1;">九玖商城</view>
		</view>
		<view class="inpVue margin40 flex align-center padding-row30">
			<image src="../../static/user.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="text" placeholder="手机号" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="phone"/>
		</view>
		
		<view class="inpVue margin30 flex align-center padding-row30 relative" v-if="isPwd">
			<image src="../../static/code.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="password" placeholder="输入登录密码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="pwd"/>
		</view>
		
		<view class="inpVue margin30 flex align-center padding-row30 relative" v-else>
			<image src="../../static/code.png" style="width: 44rpx; height: 44rpx;"></image>
			<input type="number" placeholder="输入验证码" placeholder-style="color: #6B7280; font-size: 28rpx;" v-model="code"/>
			<view class="code absolute" @click="sendFun()">{{ text }}</view>
		</view>
		
		<view class="flex-between padding-row30 margin50">
			<text style="color: #1CC289; line-height: 1; font-weight: 600;" @click="isPwd=!isPwd">{{ isPwd ? "使用验证码登录" : "使用密码登录" }}</text>
			<text style="color: #454545; line-height: 1; font-weight: 600;" @click="$tools.route('./forget')">忘记密码?</text>
		</view>
		
		<view class="loginBtn margin20" @click="toLogin()">登录</view>
		<view class="loginBtn loginBtn1 margin20" @click="$tools.route('./register')">没有账号? 去注册</view>
		
		<view class="botVue flex-center align-center" style="background: transparent;">
			<u-checkbox v-model="checked" active-color="#1CC289">我已阅读并同意<text @click="$tools.route('../person/service')">《用户协议》</text> 和 <text @click="$tools.route('../person/privacy')">《隐私政策》</text></u-checkbox>
		</view>
		
		<Loading :num="2" v-if="loading"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				pwd: "",
				code: "",
				inviteCode: "",
				text: "获取验证码",
				isSend: false,
				loading: false,
				checked: true,
				isPwd: true,
				deviceId: ""
			}
		},
		
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success(res){
					that.deviceId  = res.deviceId 
					console.log("deviceId", that.deviceId)
				}
			})
		},
		
		methods: {
			toLogin(){
				if(this.isPwd) this.loginByPwd()
				else this.loginByCode()
			},
		
			// 密码登录
			async loginByPwd(){
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				if(!this.checked) return this.$u.toast("请阅读并同意协议与条款")
				this.loading = true
				const result = await this.$request("/app-api/member/auth/login", "POST", {
					mobile: this.phone,
					password: this.pwd,
					inviteCode: this.inviteCode,
					deviceId: this.deviceId
				})
				this.loading = false
				if(result.code===0) {
					this.$u.toast("登录成功")
					console.log("登录后的token", result.data.refreshToken)
					uni.setStorageSync("token", result.data.refreshToken)
					this.$store.state.isLogin = true
					this.$store.dispatch("getUser")
					setTimeout(()=>{
						uni.switchTab({
							url: "../index/index"
						})
					}, 1000)
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			// 验证码登录
			async loginByCode(){
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				if(!this.$u.test.code(this.code, 4)) return this.$u.toast("请输入正确验证码")
				if(!this.checked) return this.$u.toast("请阅读并同意协议与条款")
				this.loading = true
				const result = await this.$request("/app-api/member/auth/sms-login", "POST", {
					mobile: this.phone,
					code: this.code,
					inviteCode: this.inviteCode,
					deviceId: this.deviceId
				})
				this.loading = false
				if(result.code===0) {
					this.$u.toast("登录成功")
					console.log("登录后的token", result.data.refreshToken)
					uni.setStorageSync("token", result.data.refreshToken)
					this.$store.state.isLogin = true
					this.$store.dispatch("getUser")
					setTimeout(()=>{
						uni.switchTab({
							url: "../index/index"
						})
					}, 1000)
				}else{
					this.$u.toast(result.msg)
				}
			},
			
			// 发送验证码
			async sendFun(){
				if(this.isSend) return
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				this.loading = true
				this.isSend = true;
				const result = await this.$request("/app-api/member/auth/send-sms-code", "POST", {
					mobile: this.phone,
					scene: 1
				})
				this.loading = false
				if(result.code===0) {
					this.$u.toast("验证码已发送")
					let count = 60;
					this.text = `${count}s`;
					let timer = setInterval(() => {
						count--;
						this.text = `${count}s`;
						if (count === 0) {
							clearInterval(timer);
							this.text = '获取验证码';
							this.isSend = false;
						}
					}, 1000);
				}else{
					this.isSend = false;
					this.$u.toast(result.msg)
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.logoVue {
		width: 100%;
		padding-top: 60rpx;
	}
	.loginBtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 15rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
	.loginBtn1 {
		background: #f5f5f5;
		color: #333;
	}
	.loginType {
		color: #1CC289;
		line-height: 1;
		padding-top: 30rpx;
		font-weight: 600;
	}
	.inpVue {
		width: 690rpx;
		height: 88rpx;
		background: #F3F4F6;
		border-radius: 16rpx;
		input {
			flex: 1;
			height: 88rpx;
			color: #333;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
		.loginType {
			color: #1CC289;
		}
		.forget {
			color: #6B7280;
		}
		.code {
			width: 200rpx;
			height: 88rpx;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			top: 0;
			right: 0;
			border-radius: 0 16rpx 16rpx 0;
			color: #fff;
			text-align: center;
			line-height: 88rpx;
		}
		
	}
	
	.botVue {
		width: 100%;
		height: 120rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		text {
			color: #1CC289;
		}
	}
</style>
